<template>
	<div class="purchase">		
	<div class="contents">
	    <div class="leaseAgreement">
	        <div class="checkbox">
	        	<input type="checkbox" v-model="checked">
	        	<label class="label">同意</label>  
	        	</div>
            <router-link tag="span" to="/leaseagreement">
            	<span class="agreement">租赁协议</span>
            </router-link>
	    </div>
	   <!-- <div class="buys" @click="showModal(price)">
	    	<p>购买</p>	    	 
	    </div>-->	 	    
	    <div class="Immediatelease" @click="showLease(cash,productid)" v-if="statu == 1 && checked">
	    	<p>立即租用</p>
	    </div>	    
	     <div class="noPay" v-else>
	    	<p>立即租用</p>
	    </div>	
	</div>
	</div>
</template>

<script>

export default {
	name: 'purchase',
	components: {
	},
	props: {
		price:{
			type:Number,
			default:0
		},
		cash:{
			type:Number,
			default:0
		},
		productid:{
			type:Number,
			default:0
		},
		statu:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			picked: 'one',
			checked:true,
			agreest:true
		}
	},
	mounted() {
	  
	},
	methods: {
		//立即租用
		showLease (cash,productid,cityName) {
			this.$router.push({
				path: '/lease',
				name:'lease',
				query: {
					cash:cash,
					productid:productid
			       }
				})
		},    
		//购买
	  showModal (price) {
			this.$router.push({
				path: '/buy',
				name:'buy',
				params: {
					price:price,
					cityName:this.cityName
			       }
				})
		},
		/*agree () {
			this.agreest = !this.agreest;
			console.log(this.agreest)
		}*/
	}
}
</script>

<style lang="less" scoped>
    .purchase{
    	width:100%;
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	font-size: 28px;
    	border-top: 1px solid gainsboro;
    	background: #FFFFFF;
    	.contents{
    		display: flex;
    		height: 100px;
    		.leaseAgreement{
    			flex: 1;
    			margin:25px 0 0 30px;  
    			.checkbox{
    				display: inline-block;
    				.label{
    					color: steelblue;
    					font-size: 28px;
    				}
    				input[type="checkbox"] {
    					background: #FFFFFF;
    					border: 1px solid gainsboro;
    					height: 40px;
    					outline: none;
    					vertical-align: middle;
    					width: 40px;
    				}
    				
    				input[type="checkbox"]:checked {
    					outline: none;
    					background: #45b97c;
    				}
    			}  			
    		}	
    		.agreement{
    			color: cornflowerblue;
    			margin-left:20px;
    		}
    		.buys{
    			height: 100%;
    			text-align: center;
    			background: #00E3E3;
    			color: #FFFFFF;
    			width:150px;
    			p{  
    				line-height: 100px;
    				font-size: 30px;
    			}
    		}
    		.Immediatelease{
    			color: #FFFFFF;
    			height: 100%;
    			text-align: center;
    			background: #FF0000;   			
    			width:150px;
    			p{
    				line-height: 100px;
    				font-size: 30px;
    			}
    		}
    		.noPay{
    			color: #FFFFFF;
    			height: 100%;
    			text-align: center;
    			background: gray;   			
    			width:150px;
    			p{
    				line-height: 100px;
    				font-size: 30px;
    			}
    		}
    	}
    }
</style>